<template>
  <div class="box">
    <Head text="搜索" />
    <div class="box">
      <div class="top">
        <!-- <img src="@/assets/banner.jpg" alt="" /> -->

        <div id="demo" class="carousel slide" data-ride="carousel">
          <!-- 指示符 -->
          <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
          </ul>

          <!-- 轮播图片 -->
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://img.alicdn.com/imgextra/i3/6000000006587/O1CN01eS9z951yWtb2pYGK8_!!6000000006587-0-octopus.jpg" />
            </div>
            <div class="carousel-item">
              <img src="https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg" />
            </div>
            <div class="carousel-item">
              <img src="https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg" />
            </div>
          </div>

          <!-- 左右切换按钮 -->
          <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>
      </div>
      <div class="cont-box">
        <h3>推荐列表</h3>
        <router-link
          tag="div"
          v-for="(value, index) in school"
          :to="{ name: 'Shang',params:{id:value.id} }"
          :key="index"
        >
          <img :src="value.img" alt="" />
          <div>
            <span>{{ value.name }}</span>
            <span>价格：￥{{ value.price }}</span>
          </div>
        </router-link>
      </div>
      <div class="boot"></div>
    </div>
    <Foot num="1" />
  </div>
</template>

<script>
import Head from "@/components/Head.vue";
import Foot from "@/components/Foot.vue";
export default {
  name: "Home",
  components: {
    Head,
    Foot,
  },
  data() {
    return {
      school: [
        {
          name: "成都.火花ACG动漫展",
          data: "2020年08月15日",
          addr: "四川省 成都市 金牛区",
          price: "￥40.00",
          guanjianche: "成都火花",
        },
        {
          name: "成都.火花ACG动漫展",
          data: "2020年08月15日",
          addr: "四川省 成都市 金牛区",
          price: "￥40.00",
          guanjianche: "成都火花",
        },
        {
          name: "成都.火花ACG动漫展",
          data: "2020年08月15日",
          addr: "四川省 成都市 金牛区",
          price: "￥40.00",
          guanjianche: "成都火花",
        },
        {
          name: "成都.火花ACG动漫展",
          data: "2020年08月15日",
          addr: "四川省 成都市 金牛区",
          price: "￥40.00",
          guanjianche: "成都火花",
        },
      ],
    };
  },
  mounted() {
    this.ajax({
      method: "get",
      url: "/queryAll",
      // data: {
      //   name: this.text,
      // },
    })
      .then((res) => {
        console.log(res);
        this.school = res.data;
      })
      .catch((res) => {
        this.school = res.data;
      });
  },
};
</script>

<style lang="scss" scoped>
.top {
  margin-top: 10px;
  // width: 100%;
  border-radius: 10px;
  cursor: pointer;
  margin: 5px 15px;
  box-sizing: border-box;
  img {
    width: 100%;
    border-radius: 10px;
  }
}
// .min-box {
//   height: 15px;
//   // background-color: orangered;
//   padding: 5px 4px;
//   display: flex;
// }
h3{
  margin-top: 20px;
}
.cont-box {
  // width: 100%;
  margin: 0 15px;
  > div {
    margin: auto;
    display: flex;
    // margin-bottom: 20px;
    // justify-content: space-between;
    padding-bottom: 20px;
    margin-top: 20px;
    border-bottom: 1px solid rgb(184, 183, 183);
    > img {
      width: 135px;
    }
    > div {
      display: flex;
      flex-wrap: wrap;
      // flex-direction: ;
      flex-direction: column;
      // margin-right: 30px;
      justify-content: space-evenly;
      padding-left: 20px;
      > span {
        height: 10px;
        &:nth-of-type(1) {
          font-size: 19px;
          font-weight: bold;
        }
        &:nth-of-type(2) {
          margin-top: 20px;
        }
      }
    }
  }
}
.boot {
  height: 70px;
}
</style>